<template>
  <div>
    <div class="menu">
      <el-button type="primary" size="small" @click="openBatchStock">批量添加</el-button>
      <!-- 模糊查询 -->
      <div class="vagueFind">
         <el-form :inline="true" :model="vagueFindForm" class="demo-form-inline" size="small">
           <el-form-item label="库存量(>=):">
             <el-input v-model="vagueFindForm.greaterStockNum" placeholder="请输入大于的库存量" clearable style="width: 120px;"
             :maxlength="4" show-word-limit>
             </el-input>
           </el-form-item>
           <el-form-item label="库存量(<=):">
             <el-input v-model="vagueFindForm.lessStockNum" placeholder="请输入小于的库存量" clearable style="width: 120px;"
             :maxlength="4" show-word-limit>
             </el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="queryStockList(1)">查询</el-button>
           </el-form-item>
         </el-form>
         <el-button type="info" icon="el-icon-delete" circle size="small" title="清除文本框数据" @click="clearvagueFindForm"></el-button>
      </div>
    </div>
    <!-- 商品列表 -->
    <el-table :data="stockStockVoList" style="width: 100%" v-loading="loadStatus">
      <el-table-column prop="stockId" label="库存ID" width="140">
      </el-table-column>
      <el-table-column prop="goodsName" label="商品ID" width="240">
      </el-table-column>
      <el-table-column prop="stockNum" label="库存数量">
      </el-table-column>
      <el-table-column prop="lockStockNum" label="锁定库存数量">
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="primary" size="mini" @click="openEditor(scope.row,0)">添加库存</el-button>&nbsp;&nbsp;
          <!-- <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delGoods(scope.row)"> -->
          <el-button slot="reference" type="danger" size="mini"  @click="openEditor(scope.row,1)">减少库存</el-button>
          <!-- </el-popconfirm> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :page-size="limit" @current-change="queryStockList"
    	:total="stockCount">
    </el-pagination>
    <!-- 库存控量 -->
    <AddStock :addVisible="addVisible" :addOptions="addOptions"></AddStock>
    <EditorStock :editorVisible="editorVisible" :editorObj="editorObj"></EditorStock>
    <ReduceStock :reduceVisble="reduceVisble" :reduceObj="reduceObj"></ReduceStock>
  </div>
</template>
<script>
  import AddStock from "./component/AddStock.vue"
  import EditorStock from "./component/EditorStock.vue"
  import ReduceStock from "./component/ReduceStock.vue"
  export default {
    name: "stock",
    components: {
      AddStock,
      EditorStock,
      ReduceStock
    },
    data(){
      return{
        loadStatus: false,
        //每页显示数
        limit:10,
        //数据总数
        stockCount:0,
        //数据展示列
        stockStockVoList:[],
        //模糊查询
        vagueFindForm:{
          greaterStockNum:"",
          lessStockNum:""
        },

        //添加
        addVisible: false,
        addOptions:[],

        //修改
          //添加
        editorVisible:false,
        editorObj:{},
          //减少
        reduceVisble:false,
        reduceObj:{}
      }
    },
    mounted() {
      this.queryStockList(1)
    },
    methods: {
      //批量添加新商品库存或修改原有库存模块方法
      openBatchStock(){
        this.addVisible = true
      },


      //打开修改商品信息子页面
      openEditor(obj,status){
        var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
        if(obj.stockId){
          if(status == 0){
            //添加库存
            this.editorObj=obj
            this.editorVisible=true
          }else if(status == 1){
            //减少库存
            this.reduceObj=obj
            this.reduceVisble=true
          }
        }else{
          this.$message({
            message: "获取数据错误",
            type: "error",
            duration: 1000,
          })
        }
      },

      //清楚模糊查询方法
      clearvagueFindForm(){
        //清楚模糊查询表单中的内容并返回原始数据的第一页
        this.vagueFindForm={
          greaterStockNum:"",
          lessStockNum:""
        }
        this.queryStockList(1)
      },
      queryStockList(page){
        var self = this;
        self.loadStatus = true
        sessionStorage.setItem("page",page)
        var manager = JSON.parse(sessionStorage.getItem("manager"))

        self.$http({
          url: "/api/CakeShop/queryStockList",
          method: "post",
          headers: {
            token: manager.token
          },
          data: {
            page:page,
            limit:self.limit,
            greaterStockNum:self.vagueFindForm.greaterStockNum,
            lessStockNum:self.vagueFindForm.lessStockNum
          },
        }).then(function(res) {
          if (res.data.page.list != null || res.data.page.list != {}) {
            //返回数据总数
            self.stockCount = res.data.page.totalCount
            res.data.page.list
            //返回符合条件的所有数据
            self.stockStockVoList = res.data.page.list

            //返回渲染数据框的数据
            self.addOptions = res.data.goodsList

            self.loadStatus = false
          }
        }).catch(function(error) {
          self.loadStatus = false
        });
      }
    }
  }
</script>

<style scoped>
  .menu {
    display: flex;
  	width: 100%;
  	padding: 10px 5px;
  	background: #FFFFFF;
  	box-sizing: border-box;
  	margin-bottom: 5px;
  }
  /* 模糊查询样式*/
  .menu .vagueFind{
    display: flex;
    background: #FFFFFF;
    margin-left: 20px;
  }
  .menu .vagueFind .el-form .el-form-item{
    margin-bottom: 0;
  }
  .menu .vagueFind .el-form .el-form-item .el-select{
     width: 130px;
  }
</style>
